<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:h="jakarta.faces.html" xmlns:f="jakarta.faces.core" xmlns:ui="jakarta.faces.facelets"
    xmlns:p="http://primefaces.org/ui" xmlns:pe="http://primefaces.org/ui/extensions" xmlns:o="http://omnifaces.org/ui"
    xmlns:sec="https://joinfaces.org/security" template="/WEB-INF/template.xhtml">
    <!--template="/template.xhtml">-->
    <ui:define name="implementation">
        <script>
            function wait(ms) {
                return new Promise(resolve => setTimeout(resolve, ms));
            }
            function expendTreeNodeBySelectedRowKey(rowkey) {
                let rowKeys = [];
                let idx;
                let separator = '_';
                rowKeys.push(rowkey);
                idx = rowkey.indexOf(separator);

                while (idx !== -1) {
                    let sub = rowkey.substring(0, idx);
                    rowKeys.push(sub);
                    idx = rowkey.indexOf(separator, idx + 1);
                    console.log("index value is :" + idx);
                }
                nodes = PF("areaTree").findNodes(rowKeys);
                nodes.forEach(n => {
                    //                    PF("areaTree").selectNode(n);
                    wait(500).then(() => PF("areaTree").expandNode(n));
                    //            PF("areaTree").expandNode(n);
                });
            }
        </script>
        <p:toolbar>
            <p:toolbarGroup>
                <p:commandButton id="delete-multiple-button" value="#{sms['button.delSingle']}" icon="pi pi-trash"
                    actionListener="#{sysOrgMBean.delSingle}" styleClass="ui-button-danger mr-2" update="areaTreeId,treeTableId"
                    disabled="#{sysOrgMBean.selectedNode==null}">
                    <p:confirm header="#{sms['confirm.title']}" message="#{sms['confirm.message']}"
                        icon="pi pi-exclamation-triangle" />
                </p:commandButton>
                <p:commandButton id="newObj" value="#{sms['button.tree.newroot']}" icon="pi pi-plus" styleClass="mr-2"
                    action="#{sysOrgMBean.newOpt('sysOrgForm')}">
                    <p:ajax event="dialogReturn" update="@form" />
                </p:commandButton>
                <p:commandButton id="newOtherObj" value="#{sms['button.tree.newnext']}" icon="pi pi-plus"
                    styleClass="mr-2" action="#{sysOrgMBean.newOtherOpt('sysOrgForm')}"
                    disabled="#{sysOrgMBean.selectedNode==null}">
                    <p:ajax event="dialogReturn" update="@form" />
                </p:commandButton>
                <p:commandButton id="editObj" value="#{sms['button.edit']}" icon="pi pi-file-edit" styleClass="mr-2"
                    action="#{sysOrgMBean.editOpt('sysOrgForm')}">
                    <p:ajax event="dialogReturn" update="@form" />
                </p:commandButton>
                <p:commandButton value="#{sms['button.tree.refresh']}" id="refreshBtnId" action="#{sysOrgMBean.init()}" icon="pi pi-refresh"
                    styleClass="mr-2" update="@form" />

                <p:commandButton id="saveChildrenSort" value="#{sms['button.tree.savesort']}" icon="pi pi-file-edit"
                    styleClass="mr-2" action="#{sysOrgMBean.saveSortChange}" update="areaTreeId,treeTableId" >
                    <!--<p:ajax event="dialogReturn"     update="@form"/>-->
                </p:commandButton>
            </p:toolbarGroup>
        </p:toolbar>
        <p:splitter layout="horizontal" style="height:800px">
            <p:splitterPanel styleClass="flex align-items-top justify-content-top" size="10" minSize="5">
                <p:scrollPanel mode="native">
                    <p:tree id="areaTreeId" widgetVar="areaTree" value="#{sysOrgMBean.root}" var="node" dynamic="true"
                        animate="true" selectionMode="single" onDrop="#{sysOrgMBean.onDrop}"
                        selection="#{sysOrgMBean.selectedNode}" highlight="true" draggable="true" droppable="true">
                        <p:ajax event="select" update="@form" listener="#{sysOrgMBean.onNodeSelect}" />
                        <p:treeNode expandedIcon="pi pi-folder-open" collapsedIcon="pi pi-folder">
                            <h:outputText value="#{node.name}" />
                        </p:treeNode>
                    </p:tree>
                </p:scrollPanel>
            </p:splitterPanel>
            <p:splitterPanel styleClass="flex align-items-top justify-content-top" size="80" minSize="20">

                <p:scrollPanel mode="native">
                    <p:dataTable id="treeTableId" widgetVar="treeTable" value="#{sysOrgMBean.childrens}" var="node"
                        draggableRows="true">
            <f:facet name="header">
                #{sms['tree.table.header']}
            </f:facet>
                        <!--<p:ajax event="rowReorder" listener="{sysOrgMBean.onRowReorder}" update="treeTableId,areaTreeId" />-->
                        <!--paginator="true" rows="10"-->
                        <!--selectionMode="single"                     selection="{sysOrgMBean.selectedNode}"-->
                        <!--selectionMode="checkbox"                     selection="{sysOrgMBean.selectedNodes2}"-->
                        <p:column headerText="#{sms['sys.org.name']}" resizable="true" width="100"
                            sortBy="#{node.name}">
                            <h:outputText value="#{node.name}" />
                        </p:column>
                        <p:column headerText="#{sms['sys.org.parent']}" sortBy="#{node.parent.name}">
                            <h:outputText value="#{node.parent.name}" />
                        </p:column>
                        <p:column headerText="#{sms['sys.org.pid']}" sortBy="#{node.pid}">
                            <h:outputText value="#{node.pid}" />
                        </p:column>
                        <p:column headerText="#{sms['sys.org.level']}" sortBy="#{node.level}">

                            <h:outputText value="#{node.level}" />
                        </p:column>
                        <p:column headerText="#{sms['sys.org.sort']}" sortBy="#{node.sort}">
                            <h:outputText value="#{node.sort}" />
                        </p:column>
                        <p:column headerText="#{sms['sys.org.hasChildren']}" sortBy="#{node.hasChildren}">
                            <h:outputText value="#{node.hasChildren}" />
                        </p:column>
                        <p:column headerText="#{sms['sys.org.formal']}" sortBy="#{node.hasChildren}">
                            <h:outputText value="#{node.formal}" />
                        </p:column>

                    </p:dataTable>
                </p:scrollPanel>
            </p:splitterPanel>
        </p:splitter>
    </ui:define>

</ui:composition>